<!-- subpkg_consult/description/index.vue -->
<script lang="ts" setup>
  import { uploadAPI } from '@/api'
  import { PAGE_PATH } from '@/constants'
  import { useConsultStore } from '@/store/counter'
  import { computed } from 'vue'

  const store = useConsultStore()

  if (store.illnessInfo.illnessDesc) {
    // 此时说明用户缓存了数据！！！ 提问一下用户你是不是要用之前的数据
    uni.showModal({
      title: '温馨提示',
      content: '是否恢复之前填写的病情信息?',
      confirmColor: '#16C2A3',
      cancelColor: '#848484',
      success(res) {
        if (!res.confirm) {
          // 第一次可以 把空数据给了响应 变化 => initalValue也变了
          // 浅拷贝 把数据隔离开
          store.illnessInfo = { ...store.initalValue } // 把一份干净的数据赋值给当前
        }
      },
    })
  }
  const selectFile = async (event: UniHelper.UniFilePickerOnSelectEvent) => {
    console.log('选择文件上传', event)
    if (event.tempFilePaths.length) {
      const res = await uploadAPI(event.tempFilePaths[0])
      // res是上传地址和id
      store.illnessInfo.pictures.push(res)
    }

    // uni.upLoadFile
    // luch-request upload (本质上也是使用的uploadFile这个方法)
  }
  // 病情描述数据
  const illnessTimes = [
    { value: 1, text: '一周内' },
    { value: 2, text: '一月内' },
    { value: 3, text: '半年内' },
    { value: 4, text: '半年以上' },
  ]
  const consultFlags = [
    { value: 1, text: '就诊过' },
    { value: 0, text: '没有就诊过' },
  ]

  const canNext = computed(() => !!store.illnessInfo.illnessDesc)
  const props = defineProps<{ type: string; illnessType: string; id: string }>()
  
  
    // 跳转到下个页面
  const toNext = () => {
    // 把参数在跳转之前 给到pinia进行缓存
    store.type = props.type
    store.illnessType = props.illnessType
    store.id = props.id
    uni.navigateTo({
      url: `${PAGE_PATH.ARCHIVE_LIST_PAGE}?type=consult`,
    })
  }
</script>

<template>
  <scroll-page>
    <view class="description-page">
      <!-- 在线医生 -->
      <view class="doctor-online">
        <image src="/static/uploads/doctor-avatar-2.png" class="doctor-avatar" />
        <view class="doctor-info">
          <view class="name">在线医生</view>
          <view class="message">
            请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
          </view>
          <view class="tips">
            <text class="iconfont icon-shield"></text>
            内容仅医生可见
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="patient-info">
        <view class="description">
          <uni-easyinput
            v-model="store.illnessInfo.illnessDesc"
            type="textarea"
            :input-border="false"
            placeholder-style="font-size: 30rpx; color: #979797"
            placeholder="请详细描述您的病情,病情描述不能为空"
          />
        </view>

        <view class="title">本次患病多久了？</view>
        <view class="tags">
          <text
            v-for="illnessTime in illnessTimes"
            :key="illnessTime.value"
            @click="store.illnessInfo.illnessTime = illnessTime.value"
            :class="{ active: illnessTime.value === store.illnessInfo.illnessTime }"
            class="tag"
          >
            {{ illnessTime.text }}
          </text>
        </view>

        <view class="title">此次病情是否去医院就诊过？</view>
        <view class="tags">
          <text
            v-for="consultFlag in consultFlags"
            :key="consultFlag.value"
            @click="store.illnessInfo.consultFlag = consultFlag.value"
            :class="{ active: consultFlag.value === store.illnessInfo.consultFlag }"
            class="tag"
          >
            {{ consultFlag.text }}
          </text>
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="patient-picture">
        <uni-file-picker
          title="上传病情相关图片 (仅医生可见)"
          limit="8"
          @select="selectFile"
          v-model="store.illnessInfo.pictures"
          :auto-upload="false"
          :image-styles="{ width: '160rpx', height: '160rpx' }"
          file-extname="png,jpg,gif,webp"
        />
      </view>
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <button @click="toNext" :disabled="!canNext" class="uni-button">下一步</button>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import './index.scss';
</style>
